<template>
  <common-pop class-name="msg-pop" :show-close="showClose" :close-on-click-mask="closeOnClickMask" @close="close">
    <view class="msg-box">
      <view class="message-content">
        <view v-if="title" class="message-title">{{ title }}</view>
        <view class="message">
          <rich-text :nodes="message"></rich-text>
        </view>
      </view>
      <view class="pop-btn-group">
        <button v-if="showConfirm" class="pop-btn-confirm" @click="onConfirm">
          {{ confirmText || '确定' }}
        </button>
        <button v-if="showCancel" class="pop-btn-cancel" @click="onCancel">
          {{ cancelText || '取消' }}
        </button>
      </view>
    </view>
  </common-pop>
</template>

<script>
import CommonPop from '../common-pop.vue'
import { getPopData } from '../index'

export default {
  name: 'Msg',
  components: {
    CommonPop
  },

  data () {
    return {
      // 弹窗标题
      title: '',
      // 消息文案
      message: '',
      // 是否展示关闭按钮
      showClose: true,
      // 是否可以通过点击弹窗遮罩关闭弹窗
      closeOnClickMask: true,
      // 是否展示取消按钮
      showCancel: false,
      // 是否展示确定按钮
      showConfirm: true,
      // 取消按钮文案
      cancelText: '',
      // 确定按钮文案
      confirmText: ''
    }
  },
  created () {
    this.initData('msg')
  },
  methods: {
    onConfirm () {
      this.close('confirm')
    },
    onCancel () {
      this.close('cancel')
    },
    close (action) {
      this.$closePop('msg', action)
    },
    initData (popName) {
      const initData = getPopData(popName)
      if (initData) {
        Object.keys(initData).forEach((key) => {
          if (key !== 'onClose') {
            this[key] = initData[key]
          }
        })
        // 如果有onClose方法,保存它
        if (typeof initData.onClose === 'function') {
          this.onClose = initData.onClose
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
.msg-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20rpx;
  height: 100%;
  box-sizing: border-box;
}

.message-content {
  text-align: center;
  width: 100%;
  height: 0;
  flex: 1;
}

.message-title {
  font-size: 32rpx;
}

.message {
  margin-top: 20rpx;
}

.pop-btn-group {
  display: flex;
  justify-content: center;
  width: 100%;

  button {
    margin: 0 10rpx;
  }
}
</style>
